<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function checkAll() {
            var hobbies = document.getElementsByName("hobby");

            for (let hobby of hobbies) {
                hobby.checked = true;
            }
        }
        
        function checkNone() {
            var hobbies = document.getElementsByName("hobby");

            for (let hobby of hobbies) {
                hobby.checked = false;
            }
        }
        
        function checkReverse() {
            var hobbies = document.getElementsByName("hobby");

            for (let hobby of hobbies) {
                hobby.checked = !hobby.checked;
            }
        }
    </script>
</head>
<body>
<table>
    <tr>
        <td>
            兴趣爱好：
        </td>
        <td>
            <input type="checkbox" name="hobby" value="cpp">C++
        </td>
        <td>
            <input type="checkbox" name="hobby" value="Java">Java
        </td>
        <td>
            <input type="checkbox" name="hobby" value="JavaScript">JavaScript
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <button onclick="checkAll()">全选</button>
        </td>
        <td>
            <button onclick="checkNone()">全不选</button>
        </td>
        <td>
            <button onclick="checkReverse()">反选</button>
        </td>
    </tr>
</table>
</body>
</html>